@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        <div class="card-body" id="element-component">
            @verbatim
                <div class="border-bottom border-info form-group">
                    <button-counter></button-counter>
                </div>
            @endverbatim
        </div>
    </div>
</div>
@verbatim
<script>
Vue.component('button-counter', {
    data : function() {
        return {
            counter: 0,
        }
    },
    template: "<button @click='counter++'>You clicked me {{counter}} times.</button>"
});

new Vue({
    el: "#element-component"
});
</script>
@endverbatim
@endsection
